<template>
    <div>
        <h1>App</h1>
        <button @click="comName = TsCard">TsCard</button>
        <button @click="comName = TsShop">TsShop</button>
        <button @click="comName = TsCart">TsCart</button>
        <KeepAlive>

            <component :is="comName"></component>
        </KeepAlive>
        <!--         
        <component :is="TsCart"></component>
        <component :is="TsShop"></component>
        <component :is="'TsHome'"></component> -->
    </div>
</template>
<script setup>
import { ref, shallowRef } from 'vue';
import TsCard from './components/TsCard.vue';
import TsCart from './components/TsCart.vue';
import TsShop from './components/TsShop.vue';

const comName = shallowRef(TsCard)
</script>

<style>
div {
    border: solid;
    padding: 10px;
}
</style>